<template>
  <div class='wrapper'>
    <div class='left'>
      <ul class='wrapperUl'>
        <li><span key='1' :class="[one === key ? 'active' : '']" @click='cutType(one)'>端午促销活动</span></li>
        <li><span key='2' :class="[two === key ? 'active' : '']" @click='cutType(two)'>新品试吃活动</span></li>
        <li><span key='3' :class="[three === key ? 'active' : '']" @click='cutType(three)'>陈列检查活动</span></li>
        <li><span key='4' :class="[four === key ? 'active' : '']" @click='cutType(four)'>劳动节陈列活动</span></li>
        <li><span key='5' :class="[five === key ? 'active' : '']" @click='cutType(five)'>日常陈列活动</span></li>
      </ul>
    </div>
    <div class='right'>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>基础信息</a-divider>
      <a-form-model :label-col='labelCol' :model='form' :wrapper-col='wrapperCol'>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动编码'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动名称'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动类型'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动执行时间'>
            <span></span>
          </a-form-model-item>
        </a-col>
      </a-form-model>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>活动信息</a-divider>
      <a-form-model :label-col='labelCol' :model='form' :wrapper-col='wrapperCol'>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动执行频率'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动描述'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='活动要求'>
            <span></span>
          </a-form-model-item>
        </a-col>
        <a-col :md='8' :sm='24'>
          <a-form-model-item label='示例图片'>
            <span></span>
          </a-form-model-item>
        </a-col>
      </a-form-model>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>陈列要求</a-divider>
      <div style='padding: 10px 80px'>
        <a-table
          ref='table'
          :columns='columns'
          :loading='loading'
          :scroll='{x:400,y:240 }'
          bordered
          rowKey='id'
          size='middle'>
        </a-table>
      </div>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>执行结果</a-divider>

    </div>
  </div>
</template>

<script>
export default {
  name: 'DisplayActivities',
  data() {
    return {
      form: {},
      key: '1',
      one: '1',
      two: '2',
      three: '3',
      four: '4',
      five: '5',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns:[
        {
          title: '产品层级名称',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '产品编码',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '最低陈列面数',
          align: 'center',
          dataIndex: 'custName'
        },
      ]
    }
  },
  methods: {
    //列表切换
    cutType(key) {
      this.key = key
      console.log(this.key)
      if(this.key === '1'){
        this.form = {}
      }
      if(this.key === '2'){
        this.form = {}
      }
      if(this.key === '3'){
        this.form = {}
      }
      if(this.key === '4'){
        this.form = {}
      }
      if(this.key === '5'){
        this.form = {}
      }
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}

.wrapperUl > li {
  padding: 20px 0px;
}

.wrapperUl > li > span {
  cursor: pointer;
  line-height: 20px;
}

.wrapper {
  display: flex;
  gap: 20px;
}

.active {
  color: #2eabff;
}

.left {
  width: 200px;
  box-sizing: border-box;
  border-right: 1px solid #999;
}

.right {
  width: 100%;
  /*margin-left: 40px;*/
}
</style>